<!-- src/views/Home.vue -->
<template>
  <h1>首页</h1>
<!--  <div class="admin-home-container">-->
<!--    &lt;!&ndash; 统计卡片区域 &ndash;&gt;-->
<!--    <div class="stat-cards">-->
<!--      <el-row :gutter="20">-->
<!--        <el-col :span="6" v-for="(item, index) in statCards" :key="index">-->
<!--          <el-card shadow="hover">-->
<!--            <div class="stat-item">-->
<!--              <div class="icon" :style="{ background: item.color }">-->
<!--                <i :class="item.icon"></i>-->
<!--              </div>-->
<!--              <div class="content">-->
<!--                <div class="value">{{ item.value }}</div>-->
<!--                <div class="label">{{ item.label }}</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->

<!--    &lt;!&ndash; 图表区域 &ndash;&gt;-->
<!--    <div class="charts-container">-->
<!--      <el-row :gutter="20">-->
<!--        &lt;!&ndash; 销售趋势图 &ndash;&gt;-->
<!--        <el-col :span="16">-->
<!--          <el-card class="chart-card">-->
<!--            <template #header>-->
<!--              <div class="card-header">-->
<!--                <span>销售趋势</span>-->
<!--              </div>-->
<!--            </template>-->
<!--            <v-chart class="chart" :option="salesOption" />-->
<!--          </el-card>-->
<!--        </el-col>-->

<!--        &lt;!&ndash; 商品分类占比图 &ndash;&gt;-->
<!--        <el-col :span="8">-->
<!--          <el-card class="chart-card">-->
<!--            <template #header>-->
<!--              <div class="card-header">-->
<!--                <span>商品分类占比</span>-->
<!--              </div>-->
<!--            </template>-->
<!--            <v-chart class="chart" :option="categoryOption" />-->
<!--          </el-card>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->

<!--    &lt;!&ndash; 最近订单列表 &ndash;&gt;-->
<!--    <el-card class="recent-orders">-->
<!--      <template #header>-->
<!--        <div class="card-header">-->
<!--          <span>最近订单</span>-->
<!--        </div>-->
<!--      </template>-->
<!--      <el-table :data="recentOrders" style="width: 100%">-->
<!--        <el-table-column prop="orderId" label="订单号" width="180" />-->
<!--        <el-table-column prop="customer" label="客户名称" width="180" />-->
<!--        <el-table-column prop="amount" label="订单金额" />-->
<!--        <el-table-column prop="status" label="状态">-->
<!--          <template #default="scope">-->
<!--            <el-tag :type="getStatusType(scope.row.status)">-->
<!--              {{ scope.row.status }}-->
<!--            </el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column prop="createTime" label="创建时间" />-->
<!--      </el-table>-->
<!--    </el-card>-->
<!--  </div>-->
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

// 注册必须的组件
use([
  CanvasRenderer,
  LineChart,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 统计卡片数据
const statCards = ref([
  {
    label: '总用户数',
    value: '1,234',
    icon: 'el-icon-user',
    color: '#409EFF'
  },
  {
    label: '总订单数',
    value: '3,456',
    icon: 'el-icon-s-order',
    color: '#67C23A'
  },
  {
    label: '总销售额',
    value: '￥89,456',
    icon: 'el-icon-money',
    color: '#E6A23C'
  },
  {
    label: '日活用户',
    value: '234',
    icon: 'el-icon-data-line',
    color: '#F56C6C'
  }
])

// 销售趋势图配置
const salesOption = ref({
  title: {
    text: '近7天销售趋势'
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line',
    smooth: true
  }]
})

// 商品分类占比图配置
const categoryOption = ref({
  title: {
    text: '商品分类占比',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: '商品分类',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '服装' },
        { value: 735, name: '电子' },
        { value: 580, name: '食品' },
        { value: 484, name: '家居' },
        { value: 300, name: '其他' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 最近订单数据
const recentOrders = ref([
  {
    orderId: 'ORDER2024001',
    customer: '张三',
    amount: '￥299.00',
    status: '已完成',
    createTime: '2024-03-15 10:00:00'
  },
  {
    orderId: 'ORDER2024002',
    customer: '李四',
    status: '待付款',
    amount: '￥599.00',
    createTime: '2024-03-15 09:30:00'
  },
  // 可以添加更多订单数据
])

// 订单状态标签类型
const getStatusType = (status) => {
  const statusMap = {
    '已完成': 'success',
    '待付款': 'warning',
    '已取消': 'danger',
    '处理中': 'info'
  }
  return statusMap[status] || 'info'
}

onMounted(() => {
  // 这里可以添加页面加载时的数据获取逻辑
})
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
}

.icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.icon i {
  font-size: 24px;
  color: #fff;
}

.content .value {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 4px;
}

.content .label {
  font-size: 14px;
  color: #909399;
}

.charts-container {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart {
  height: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recent-orders {
  margin-bottom: 20px;
}
</style>